{#
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/base/base-protocol.html" %}

{% from "macros-protocol.html" import picto with context %}

{% block page_title %}{{ seo_title }}{% endblock %}
{% block page_title_suffix %} — {{ ftl('firefox-home-mozilla') }}{% endblock %}
{% block page_desc %}{{ seo_desc }}{% endblock %}

{% block site_css %}
  {% if ftl_file_is_active('navigation_refresh') and ftl_file_is_active('footer-refresh') %}
    {{ css_bundle('m24-root') }}
    {{ css_bundle('m24-navigation-and-footer') }}
  {% else %}
    {{ css_bundle('legacy-navigation-and-footer') }}
  {% endif %}
  {{ css_bundle('protocol-firefox') }}
{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('challenge-the-default') }}
{% endblock %}

{% macro cta_group(position) -%}
  <a href="{{ url('firefox.set-as-default.thanks')}}" class="is-not-default mzp-c-button mzp-t-lg" data-cta-text="Set as default" data-cta-position="{{ position }}">{{ cta_default }}</a>
  <a href="{{ url('firefox.browsers.mobile.index') }}" class="is-default mzp-c-button mzp-t-lg" data-cta-text="Firefox for Mobile" data-cta-position="{{ position }}">{{ cta_mobile }}</a>
  {{ download_firefox_thanks(button_class='not-firefox', alt_copy=cta_download, download_location=position, locale_in_transition=True) }}
{%- endmacro %}

{% block content %}
<main class="firefox-home" data-variant="{% if variation %}{{ variation }}{% else %}none{% endif %}">
  {% if variation not in ["2", "3", "4", "5", "6"] %}
  <div class="ctd-mobile-banner">
    {{ resp_img(
        url='protocol/img/logos/firefox/browser/logo.svg',
        optional_attributes={
          'loading': 'eager',
          'height': '24',
          'class': 'ctd-sub-nav-image',
          'alt': hero_alt
      })
    }}
    <div class="ctd-logo-sprite"></div>
  </div>
  {% endif %}
  <section class="ctd-hero-wrapper">
    <div class="hidden hero-easter-egg">
      <svg class="toggle-easter-egg" id="elBstU1fviJ1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
        viewBox="-17 -17 230 230" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
        <g class="toggle-1" transform="translate(98.00007,96.099044)">
          <g transform="translate(-98.00007,-98.000055)">
            <g class="toggle-2" transform="translate(97.999979,98) rotate(14.346138)">
              <g transform="translate(-98.000017,-97.833804)">
                <g transform="matrix(.99505-.099378 0.099378 0.99505-9.072467 10.206868)">
                  <rect width="181.107" height="181.107" rx="20.0966" ry="20.0966"
                    transform="matrix(.997642-.068631 0.068631 0.997642 1.279533 13.708624)" fill="#2ac3a2" stroke="#000"
                    stroke-width="2.4" />
                  <line x1="17.6598" y1="56.5235" x2="170.985" y2="45.9758" transform="translate(.000003 0.000024)"
                    fill="none" stroke="#000" stroke-width="2.4" />
                  <line x1="23.9645" y1="148.158" x2="177.289" y2="137.611" transform="translate(.259053-.035321)" fill="none"
                    stroke="#000" stroke-width="2.4" />
                  <line x1="174.282" y1="93.8886" x2="20.9568" y2="104.436" transform="translate(.000003 0.000024)"
                    fill="none" stroke="#000" stroke-width="2.4" />
                  <g class="toggle-3" transform="translate(-84.259661,12.676931)">
                    <circle r="21.9131" transform="rotate(-3.93538) translate(126.743,141.99)" fill="#d1ffee" stroke="#000"
                      stroke-width="2.4" />
                  </g>
                  <g class="toggle-4" transform="translate(127.223245,195.169663)">
                    <circle r="21.9131" transform="rotate(176.065003) translate(71.5074,100.055)" fill="#d1ffee" stroke="#000"
                      stroke-width="2.4" />
                  </g>
                  <g class="toggle-5" transform="translate(46.506363,54.640314)">
                    <g transform="translate(-120.438008,-50.353203)">
                      <circle r="21.9131" transform="matrix(.997642-.068631 0.068631 0.997642 120.438 50.3532)" fill="#d1ffee"
                        stroke="#000" stroke-width="2.4" />
                      <g class="toggle-6" transform="translate(104.782829,144.81797) rotate(33.095676)">
                        <g class="toggle-7" transform="translate(-119.898091,-51.813541)" opacity="0">
                          <g>
                            <circle r="1.80102" transform="matrix(.997642-.068631 0.068631 0.997642 115.0115 45.704278)" />
                            <circle r="1.80102" transform="matrix(.997642-.068631 0.068631 0.997642 124.5935 45.046078)" />
                            <path d="M133.644,45.5344c.524,7.6079-5.219,14.1995-12.827,14.7229s-14.2-5.2197-14.723-12.8276"
                              transform="translate(.0125 0.091678)" fill="none" stroke="#000" stroke-width="2.4" />
                          </g>
                        </g>
                      </g>
                      <g class="toggle-8" transform="translate(60.739709,104.407171) rotate(33.095676)">
                        <g class="toggle-9" transform="translate(-119.898091,-51.813541)" opacity="0">
                          <g>
                            <circle r="1.80102" transform="matrix(.997642-.068631 0.068631 0.997642 115.0115 45.704278)" />
                            <circle r="1.80102" transform="matrix(.997642-.068631 0.068631 0.997642 124.5935 45.046078)" />
                            <path d="M133.644,45.5344c.524,7.6079-5.219,14.1995-12.827,14.7229s-14.2-5.2197-14.723-12.8276"
                              transform="translate(.0125 0.091678)" fill="none" stroke="#000" stroke-width="2.4" />
                          </g>
                        </g>
                      </g>
                      <g class="toggle-10"transform="translate(119.898091,51.813541) rotate(33.095676)">
                        <g class="toggle-11" transform="translate(-119.898091,-51.813541)" opacity="0">
                          <g>
                            <circle r="1.80102" transform="matrix(.997642-.068631 0.068631 0.997642 115.0115 45.704278)" />
                            <circle r="1.80102" transform="matrix(.997642-.068631 0.068631 0.997642 124.5935 45.046078)" />
                            <path d="M133.644,45.5344c.524,7.6079-5.219,14.1995-12.827,14.7229s-14.2-5.2197-14.723-12.8276"
                              transform="translate(.0125 0.091678)" fill="none" stroke="#000" stroke-width="2.4" />
                          </g>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
            </g>
          </g>
        </g>
      </svg>
      <p>{{ hero_egg }}</p>
    </div>
    <div class="c-ctd-hero mzp-l-content mzp-t-content-xl">
      <svg class="svg" width="0" height="0">
        <clipPath id="hero-clip-path-mobile" clipPathUnits="objectBoundingBox">
          <path d="M0.028,0 H0.992 L1,1 L0,0.973 V0.329 L0.028,0"></path>
        </clipPath>
        <clipPath id="hero-clip-path" clipPathUnits="objectBoundingBox">
          <path d="M0.011,0.985 L0,0 L1,0.02 V0.663 L0.968,1 L0.011,0.985"></path>
        </clipPath>
      </svg>
      <div class="hero-wrapper">
        <div class="c-hero-top">
          <div class="c-hero-top-images">
            {% if variation not in ["2", "3", "4", "5", "6"] %}
              {{ resp_img(
                url='protocol/img/logos/firefox/browser/logo.svg',
                optional_attributes={
                  'loading': 'eager',
                  'alt': hero_alt,
                  'class': 'firefox-logo',
                  'width': '50px'
                })
              }}
              <div class="ctd-logo-sprite"></div>
            {% endif %}
          </div>
          <div class="c-hero-top-controls" aria-hidden="true">
              <span class="hero-control-btn minimize"></span>
              <span class="hero-control-btn expand"></span>
              <button type="button" class="hero-control-btn close" tabindex="-1">close</button>
          </div>
        </div>
        <div class="hero-content-wrapper">
          {% if variation in ["1", "2", "3", "4", "5", "6"] %}
            {% include 'firefox/challenge-the-default/includes/heroes/hero-v' + variation + '.html' %}
          {% else %}
            {% include 'firefox/challenge-the-default/includes/hero.html' %}
          {% endif %}
        </div>
      </div>
    </div>
  </section>
    <section class="mzp-l-content mzp-t-content-xl c-ctd-features">
      <h2>{{ features_head|safe }}</h2>
      <ul class="mzp-l-columns mzp-t-columns-four">
        {% call picto(
          base_el='li',
          title=features_browsing_title,
          image=resp_img(
          url='img/firefox/challenge-the-default/cursor.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'loading': 'lazy'
            }
          ),
          body=True,
        ) %}
          <p>{{ features_browsing_body }}</p>
        {% endcall %}
        {% call picto(
          base_el='li',
          title=features_multi_title,
          image=resp_img(
            url='img/firefox/challenge-the-default/screen.svg',
            optional_attributes={
              'class': 'mzp-c-picto-image',
              'loading': 'lazy'
            }
          ),
          body=True,
        ) %}
          <p>{{ features_multi_body }}</p>
        {% endcall %}
        {% call picto(
          base_el='li',
          title=features_power_title,
          image=resp_img(
            url='img/firefox/challenge-the-default/toggle.svg',
            optional_attributes={
              'class': 'mzp-c-picto-image',
              'loading': 'lazy'
            }
          ),
          body=True,
        )%}
          <p>{{ features_power_body }}</p>
          <small>{{ features_power_small }}</small>
        {% endcall %}
        {% call picto(
          base_el='li',
          title=features_pdf_title,
          image=resp_img(
            url='img/firefox/challenge-the-default/input.svg',
            optional_attributes={
              'class': 'mzp-c-picto-image',
              'loading': 'lazy'
            }
          ),
          body=True,
        )%}
          <p>{{ features_pdf_body }}</p>
        {% endcall %}
      </ul>
    </section>

    {% include 'firefox/challenge-the-default/includes/toggles.html' %}

    <section class="c-ctd-comparison">
      <div class="mzp-l-content mzp-t-content-lg">
        <div class="c-ctd-comparison-text">
          <h2>{{ compare_title|safe }}</h2>
          <p>{{ compare_body }} </p>
        </div>

        <table class="mzp-u-data-table comparison-table" data-selected-browser="chrome">
          <thead>
            <tr>
              <td class="empty"></td>
              <th scope="col" class="firefox">Firefox</th>
              <th scope="col" class="safari">Safari</th>
              <th scope="col" class="chrome">Chrome</th>
              <th scope="col" class="edge">Edge</th>
              <th scope="col" class="mobile-select-wrapper">
                <select class="mobile-select">
                  <option value="chrome">Chrome</option>
                  <option value="safari">Safari</option>
                  <option value="edge">Edge</option>
                </select>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">{{ compare_passwords }}</th>
              <td class="firefox" aria-label="checkmark">✓</td>
              <td class="safari" aria-label="checkmark">✓</td>
              <td class="chrome" aria-label="checkmark">✓</td>
              <td class="edge" aria-label="checkmark">✓</td>
            </tr>
            <tr>
              <th scope="row" class="break-word">{{ compare_search }}</th>
              <td class="firefox" aria-label="checkmark">✓</td>
              <td class="safari" aria-label="checkmark">✓</td>
              <td class="chrome" aria-label="checkmark">✓</td>
              <td class="edge" aria-label="checkmark">✓</td>
            </tr>
            <tr>
              <th scope="row">{{ compare_sync }}</th>
              <td class="firefox" aria-label="checkmark">✓</td>
              <td class="safari" aria-label="checkmark">✓</td>
              <td class="chrome" aria-label="checkmark">✓</td>
              <td class="edge" aria-label="checkmark">✓</td>
            </tr>
            <tr>
              <th scope="row">{{ compare_block }}</th>
              <td class="firefox" aria-label="checkmark">✓</td>
              <td class="safari" aria-label="checkmark">✓</td>
              <td class="chrome"></td>
              <td class="edge" aria-label="checkmark">✓</td>
            </tr>
            <tr>
              <th scope="row">{{ compare_profit }}</th>
              <td class="firefox" aria-label="checkmark">✓</td>
              <td class="safari"></td>
              <td class="chrome"></td>
              <td class="edge"></td>
            </tr>
            <tr>
              <th scope="row">{{ compare_privacy }}</th>
              <td class="firefox" aria-label="checkmark">✓</td>
              <td class="safari"></td>
              <td class="chrome"></td>
              <td class="edge"></td>
            </tr>
            <tr>
              <th scope="row">{{ compare_shareholders }}</th>
              <td class="firefox" aria-label="checkmark">✓</td>
              <td class="safari"></td>
              <td class="chrome"></td>
              <td class="edge"></td>
            </tr>
            <tr>
              <th scope="row">{{ compare_logo }}</th>
              <td class="firefox" aria-label="checkmark">✓</td>
              <td class="safari"></td>
              <td class="chrome"></td>
              <td class="edge"></td>
            </tr>
          </tbody>
        </table>
        <section aria-hidden="true">
          <button type="button" class="kitten-button" tabindex="-1">=^._.^=</button>
        </section>
        <div class="comparison-cta">
          <h3>{{ compare_cta }}</h3>
          {{ cta_group('comparison') }}
        </div>
      </div>
    </section>
      <div class="mzp-u-modal-content kitten-modal">
        <div class="kitten-modal-grid">
          <h2>{{ kitten_egg }}</h2>
          {{ picture(
            url='img/firefox/challenge-the-default/laser-cat-mobile.png',
            sources=[
              {
                'media': '(max-width: 768px)',
                'srcset': {
                  'img/firefox/challenge-the-default/laser-cat-mobile.png': 'default'
                }
              },
              {
                'media': '(min-width: 769px)',
                'srcset': {
                  'img/firefox/challenge-the-default/laser-cat-desktop.png': 'default'
                }
              },
            ],
            optional_attributes={
              'loading': 'lazy',
              'class': 'laser-cat'
            }
        )}}
        </div>
      </div>

  <section class="c-ctd-credentials">
    <div class="mzp-l-content mzp-t-content-md">
      <h2>{{ cred_title }}</h2>
      <details class="mzp-c-details">
        <summary>
          <h3>{{ cred_private_title }}</h3>
        </summary>
        <p>{{ cred_private_body }}</p>
      </details>
    {% if cred_ethical_title %}
      <details class="mzp-c-details">
        <summary>
          <h3>{{ cred_ethical_title }}</h3>
        </summary>
        <p>{{ cred_ethical_body }}</p>
      </details>
    {% endif %}
      <details class="mzp-c-details">
        <summary>
          <h3>{{ cred_change_title }}</h3>
        </summary>
        <p>{{ cred_change_body }}</p>
      </details>
      <details class="mzp-c-details">
        <summary>
          <h3>{{ cred_community_title }}</h3>
        </summary>
        <p>{{ cred_community_body }}</p>
      </details>

    </div>
  </section>

  {% include 'firefox/challenge-the-default/includes/wednesday.html' %}

  <section class="mzp-l-content mzp-t-content-md c-ctd-footer">
    <h3>{{ footer_title }}</h3>
    <p>{{ footer_body|format('href="https://community.mozilla.org/" target="_blank" rel="noopener noreferrer" data-cta-text="Community"')|safe }}</p>
    {{ cta_group('footer') }}
    <p class="text-bottom mobile">{{ footer_mobile|safe }}</p>
    <p class="text-bottom desktop">{{ footer_desktop }}</p>
  </section>
{% endblock %}

{% block js %}
  {{ js_bundle('challenge-the-default') }}
{% endblock %}
